<template>
  <div class="w-full flex flex-row gap-2 px-2 hover:bg-CenterHover rounded-sm" @click="GoRequestList">
    <n-badge :max="99" :value="SessionItem.unread === 0 ? '' : SessionItem.unread">
      <div class="iconfont icon-xindepengyou1 icon"></div>
    </n-badge>

    <div class="flex-1 flex flex-col justify-center">
      <!-- 消息顶部 -->
      <div class="flex flex-row justify-between items-center">
        <div class="text-sm text-fontRegular font-medium">好友请求</div>
        <div class="text-bold text-[10px] text-fontDisable">
          {{ formatRelativeTime(SessionItem.updatedAt) }}
        </div>
      </div>
      <!-- 消息内容 -->
      <p class="text-xs text-fontPlaceholde text-nowrap text-ellipsis overflow-hidden">新的好友请求添加</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useSession } from "@/store/modules/session.ts";
import { useChat } from "@/store/modules/chat.ts";
import { ISession } from "@/types/session.ts";
import { formatRelativeTime } from "@/utils/time.ts";
import { NBadge } from "naive-ui";

const chat = useChat();
const session = useSession();
const props = withDefaults(
  defineProps<{
    SessionItem: ISession;
  }>(),
  {},
);

async function GoRequestList() {
  const { chatType, sessionId, toId: id } = props.SessionItem;
  chat.ChatObject = { id, chatType, sessionId, name: "", avatar: "" };
  await session.RemoveUnread(props.SessionItem.sessionId);
}
</script>

<style lang="scss" scoped>
.icon {
  font-size: 34px;
  border-radius: 5px;
  color: #f89c47;
}
</style>
